<template>
  <div class="video-tree">
    <div class="search">
        <el-input
          suffix-icon="el-icon-search"
          placeholder="输入关键字进行过滤"
          v-model="filterText">
        </el-input>
    </div>
    <el-scrollbar :style="{ 'height': height }" :native="false" >    
        <el-tree :data="list" default-expand-all ref="tree" 
        node-key="id" :filter-node-method="filterNode" 
        :show-checkbox="showCheckbox"
        highlight-current 
       @check-change="change"
        :props="defaultProps" @node-click="handleNodeClick">
        </el-tree>
    </el-scrollbar>        
   </div> 
</template>

<script>
export default {
  props: {
    autoLoad: {
      type: Boolean,
      default: true
    },
    platform: {
      type: String
    },
    height: {
      type: String,
      default: 'auto'
    },
    showCheckbox: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      filterText: '',
      list: [],
      treeData: [],
      defaultProps: {
        children: 'children',
        id: 'id',
        label: 'text'
      }
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    platform(n) {
      if (n) {
        this.list = this.handleData(this.treeData);
      }
    }
  },
  computed: {
    layoutSkin: {
      get() { return this.$store.state.common.layoutSkin; }
    }
  },
  mounted() {
    if (this.autoLoad) {
      this.getClassTree();
    }
  },
  methods: {
    // 手动加载调用
    load() {
      this.getClassTree();
    },
    // 输入框搜索时的过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.text.indexOf(value) !== -1;
    },
    // 多选change
    change(a, b) {
      this.$emit('change', a, b);
    },
    handleNodeClick(data, b) {
      if (!this.showCheckbox) {
        this.$emit('handleNodeClick', data);
      }
    },
    // 获取左侧视频树.
    getClassTree() {
      const params = {
        url: '/api/ems/video/point/tree',
        type: 'post',
        params: {}
      };
      this.$ajax(params).then(resp => {
        const { rows, result } = resp;
        if (result) {
          this.list = rows;
          this.$nextTick(_ => {
            if (this.showCheckbox) {
              const checkedKeys = [];
              this.list.forEach((item, index) => {
                if (index < 2) {
                  checkedKeys.push(item.id);
                  item.children.forEach(v => {
                    checkedKeys.push(v.id);
                  });
                }
              });
              this.$refs.tree.setCheckedKeys(checkedKeys);
            } else {
              const list = this.list.reduce((item, next) => {
                item.push(...next.children);
                return item;
              }, []);
              if (list.length) {
                this.currentNodekey = list[0].id;
                this.$refs.tree.setCurrentKey(this.currentNodekey);
                this.$emit('handleNodeClick', list[0]);
              }
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="scss">
.video-tree{
  //  width: 370px;
   background: #FFFFFF;
  //  box-shadow: 1px 0px 3px 0px rgba(0, 21, 41, 0.12);
   .search{
     padding: 10px;
     padding-bottom:5px;
   }
   .el-tree{
     padding-left: 10px;
     padding-right: 10px;
     .el-tree-node__label{
        font-size: 15px;
        font-weight: 400;
        color: #000000;
        opacity: .7;
     }
     .el-tree-node__content{
       height: 35px;
     }
     .custom-tree-node{
       display: flex;
       align-items: center;
       .icon-svg{
         margin: 0 3px;
       }
       .status{
         padding: 0 7px;
       }
     }
      &--highlight-current 
        .el-tree-node.is-current>.el-tree-node__content {
            background-color: #E6F7FF
        }

        .el-tree-node__content:hover {
            background-color: #E6F7FF
        }

        .el-tree-node.is-current>.el-tree-node__content {
          background-color: #E6F7FF
        }

        .el-tree-node:focus>.el-tree-node__content {
          background-color: #E6F7FF
      }
   }
   .icon-svg{
     font-size:7px;
   }

  
}
</style>